<template>
  <div class="video-box">
    <!-- <img src="../assets/images/preview.jpg" alt="" class="bgimg"> -->
    <video class="video-background" preload="auto" loop autoplay muted src="../assets/images/out.mp4"></video>
    <div class="login-container">
      <h3 class="title">后台管理系统</h3>
      <el-form :model="userform" :rules="userrule" ref="loginform">
        <el-form-item label="用户头像:" prop="avatar">
          <el-upload
            class="upload_image"
            action="#"
            :headers="headers"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="handleChange"
            multiple
            :limit="1"
            accept=".png, .jpg, .JPG, .JPEG, .jpeg, .PNG .GIF, .gif"
          >
            <el-button size="small" type="primary">点击上传</el-button>

            <!-- <div slot="tip" class="el-upload__tip">只能上传图片文件,且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user" v-model.trim="userform.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" show-password v-model.trim="userform.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="onSubmit">登录/注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyLogin',

  data() {
    return {
      userform: {
        username: '',
        password: '',
        avatar: ''
      },
      userrule: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 10, message: '请输入用户名在3-10位', trigger: 'blur' },
          { required: true, pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/, message: '用户名不支持特殊字符', trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
          { pattern: /(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9_])[\S]{6,}/i, message: '密码必须包含字母、数字和特殊字符,且长度要在6位以上' }
          //插入正则验证：大小写、数字、至少8位、不常用字符
        ],
        // avatar: [{ required: true, message: '请上传用户头像', trigger: 'change' }]
      },
      fileList: [],
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  },

  mounted() {},

  methods: {
    async onSubmit() {
      this.$refs['loginform'].validate(async valid => {
        if (valid) {
          const username = this.userform.username
          const { result } = await this.$http.get('/users/username', { params: { username: username } })
          if (result.data.length == 0) {
            const data = await this.$http.post('/users/postuser', {
              username: this.userform.username,
              password: this.userform.password,
              avatar: this.userform.avatar
            })
            this.$message({
              type: 'success',
              message: '游客注册成功',
              duration: 1000
            })
            localStorage.setItem('token', data.token)
            this.$router.push('/myblog')
          } else {
            if ((result.data[0].username = this.userform.username)) {
              const password = this.userform.password
              const username = this.userform.username
              const data = await this.$http.get('/users/user/password', { params: { password: password, username: username } })
              if (data.code == 1) {
                this.$message({
                  type: 'error',
                  message: '密码错误请重新输入成功',
                  duration: 1000
                })
                this.userform.password = ''
              } else {
                if (data.ismanager == 1) {
                  this.$message({
                    type: 'success',
                    message: '管理员登录成功',
                    duration: 1000
                  })
                  localStorage.setItem('ismanager', '1')
                  localStorage.setItem('token', data.token)
                  this.$router.push('/admin/home')
                } else {
                  this.$message({
                    type: 'success',
                    message: '游客登录成功',
                    duration: 1000
                  })
                  localStorage.setItem('token', data.token)
                  this.$router.push('/myblog')
                }
              }
            }
          }
        }
      })
    },
    handleChange(file, fileList) {
      this.fileList = fileList
      var param = new FormData()
      this.fileList.forEach((val, index) => {
        param.append('file', val.raw)
      })
      this.$http
        .post('/users/upload', param)
        .then(res => {
          this.userform.avatar = res.path
          this.$message({
            type: 'success',
            message: '上传用户头像成功',
            duration: 1000
          })
        })
        .catch(err => {})
    }
  }
}
</script>

<style scoped>
.video-box {
  position: relative;
  height: 100vh;
  overflow: hidden;
  /* background-color: #ccc;
  background-image: url(../assets/images/preview.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  background-color: #fff */
}
.video-background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  min-height: 900px;
}
.el-form-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: #fff;
}
.el-input {
  display: inline-block;
  height: 47px;
}
.el-input__inner {
  height: 47px;
  margin-left: 10px;
  padding: 12px 5px 12px 15px;
  border: none;
  background: transparent;
  color: #eee;
  appearance: none;
  border-radius: 0px;
}
/* 加上scoped: 将样式限定到当前组件 */
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2d3a4b;
  z-index: -1;
}
.login-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  padding: 35px 35px 15px 35px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.login-container .title {
  margin: 0px auto 40px auto;
  font-size: 26px;
  font-weight: 700;
  color: #bb9397;
  text-align: center;
}
.avatar {
  position: absolute;
  width: 50px;
  height: 40px;
  left: 200px;
}
</style>
